<!--
 * @Author: 曹捷
 * @Date: 2020-06-20 16:16:56
 * @LastEditors: 曹捷
 * @LastEditTime: 2020-09-03 21:02:26
 * @Description: 自定义底部弹出选择
--> 
<template>
  <uni-popup @change="change" ref="popupShare" type="bottom">
    <div class="obit-popup">
      <div class="title color-info" v-if="title">{{title}}</div>
      <slot></slot>
      <div @click="cancle" class="cancelBtn line-btn color-info m-t-10">取消</div>
    </div>
  </uni-popup>
</template>

<script>
export default {
  props: {
    visable: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: ' ',
    },
  },
  watch: {
    visable(value) {
      if (value) {
        this.$refs.popupShare.open()
      } else {
        this.$refs.popupShare.close()
      }
    },
  },
  methods: {
    change(e) {
      if (!e.show) {
        this.$emit('update:visable', false)
      }
    },
    cancle() {
      this.$emit('update:visable', false)
    },
  },
}
</script>

<style lang="scss">
.cancelBtn {
  background: #f6f6f6;
  border-radius: 80rpx;
}
</style>
